<template>
  <view class="container">
    <u-navbar
      backIconColor="#fff"
      title-size="36"
      :is-back="true"
      :background="background"
      :border-bottom="false"
      title-color="#fff"
    >
    </u-navbar>
    <view class="cus-bg"></view>
    <view class="content">
      <view class="title">选择加入聚商圈身份</view>
      <view class="card dis-flex flex-y-center flex-y-between">
        <view class="card-l">
          <view class="bold">供应商身份加入</view>
          <view class="des dis-flex flex-y-center">
            <text>规则说明</text>
            <u-icon name="/static/enter.png" size="20" style="margin-left: 10rpx"></u-icon>
          </view>
        </view>
        <view class="card-r" v-if="isJoinInvest"> 进入聚商圈 </view>
        <view class="card-r apply" v-else @click="routeTo('/gather/apply-join', 'gongying')">
          申请加入
        </view>
      </view>
      <view class="card dis-flex flex-y-center flex-y-between">
        <view class="card-l">
          <view class="bold">投资商身份加入</view>
          <view class="des dis-flex flex-y-center">
            <text>规则说明</text>
            <u-icon name="/static/enter.png" size="20" style="margin-left: 10rpx"></u-icon>
          </view>
        </view>
        <view class="card-r" v-if="isJoinTouzhi" @click="routeTo('/gather/invest/center')">
          进入聚商圈
        </view>
        <view class="card-r apply" v-else @click="routeTo('/gather/apply-join', 'touzi')">
          申请加入
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: 'transparent'
      },
      isJoinInvest: true,
      isJoinTouzhi: true
    }
  },
  methods: {
    routeTo(url, type) {
      uni.navigateTo({
        url: url + '?type=' + type
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #10a28f !important;
}
.container {
  background-color: #10a28f;
  height: 100vh;
}

.cus-bg {
  width: 100%;
  height: 200px;
  position: absolute;
  top: -180rpx;
  z-index: 0;
  background-color: #2baf9e;
  -webkit-clip-path: polygon(
    37% 70%,
    64% 80%,
    83% 77%,
    100% 84%,
    100% 100%,
    0 100%,
    1% 78%,
    16% 70%
  );
  clip-path: polygon(37% 70%, 64% 80%, 83% 77%, 100% 84%, 100% 100%, 0 100%, 1% 78%, 16% 70%);
}
.content {
  position: relative;
  z-index: 2;
}
.title {
  font-weight: 600;
  font-size: 48rpx;
  color: #ffffff;
  text-align: center;
  margin-top: 10rpx;
  margin-bottom: 30rpx;
}
.card {
  width: 710rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 65rpx 20rpx 78rpx 30rpx;
  margin: auto;
  margin-bottom: 30rpx;
  .card-l {
    .bold {
      font-weight: 600;
      font-size: 36rpx;
      color: #333333;
      margin-bottom: 30rpx;
    }
    .des {
      font-size: 26rpx;
      color: #666666;
    }
  }
  .card-r {
    width: 180rpx;
    height: 60rpx;
    background: #10a28f;
    border-radius: 30rpx;
    line-height: 60rpx;
    text-align: center;
    color: #ffffff;
  }
  .apply {
    background: #ff6f10;
  }
}
</style>
